<div class="GoodsAdd">
  <el-steps :active="stepActive" finish-status="success">
      <el-step title="第一步" description="基本信息"></el-step>
      <el-step title="第二步" description="商品图片"></el-step>
      <el-step title="第三步" description="商品内容"></el-step>
  </el-steps>
  <el-tabs tab-position="left" v-model="tabActive" @tab-click="changeTab">
    <el-tab-pane label="基本信息" name="basic">
        <el-form :model="goodsAddForm" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="goodsAddForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="goodsAddForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="goodsAddForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="goodsAddForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <!-- goodsAddForm.goods_cat -->
            <el-cascader
              :options="goodsAddList"
              v-model="goodsAddForm.goods_cat"
              :props="{label:'cat_name',value:'cat_id'}"
              >
            </el-cascader>
          </el-form-item>
          <el-form-item label="是否促销">
            <!-- goodsAddForm.is_promote -->
            <el-radio v-model="goodsAddForm.is_promote" :label="true">是</el-radio>
            <el-radio v-model="goodsAddForm.is_promote" :label="false">否</el-radio>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="nextStep(1,'pics')" type="primary">下一步</el-button>
    </el-tab-pane>
    <el-tab-pane label="商品图片" name="pics">
        <!--
          图片上传组件
            action 指定图片上传接口地址
            :on-preview 点击文件列表中已上传的文件时的钩子
            :on-remove 文件列表移除文件时的钩子
            :file-list="fileList2" 上传的文件列表
            list-type="picture" 上传图片的外观样式
            :on-success 文件上传成功时的回调函数
        -->
        <el-upload
          action="http://localhost:8888/api/private/v1/upload"
          :on-success="uploadSuccess"
          :headers="uploadHeaders"
          list-type="picture-card"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>

        <el-button style="margin-top: 12px;" @click="nextStep(2,'content')" type="primary">下一步</el-button>
    </el-tab-pane>
    <el-tab-pane label="商品内容" name="content">
        <quill-editor v-model="goodsAddForm.goods_introduce" class="quillEditor">
        </quill-editor>
        <el-button style="margin-top: 20px;" type="primary" @click="addGoods">确定</el-button>
    </el-tab-pane>
  </el-tabs>
</div>
